let product=(function(){
	let data;
	//cloumn 是类数组集合，不能用 sort
	//1. 类数组集合--->数组
	let cloumns=Array.from(document.querySelectorAll(".cloumn"));
	//不能找到图片，图片还没有渲染上去
	//渲染完之后再找图片---》render() 最后
	let imgs=null;
    let html=document.documentElement||document.body;
	//节流函数
		const throttle = function throttle(func, wait) {
		    if (typeof func !== "function") throw new TypeError('func must be an function');
		    if (typeof wait !== "number") wait = 300;
		    let timer,
		        previous = 0;
		    return function proxy(...params) {
		        let now = +new Date(),
		            remaining = wait - (now - previous),
		            self = this,
		            result;
		        if (remaining <= 0) {
		            if (timer) {
		                clearTimeout(timer);
		                timer = null;
		            }
		            result = func.call(self, ...params);
		            previous = now;
		        } else if (!timer) {
		            timer = setTimeout(() => {
		                if (timer) {
		                    clearTimeout(timer);
		                    timer = null;
		                }
		                result = func.call(self, ...params);
		                previous = +new Date();
		            }, remaining);
		        }
		        return result;
		    };
		};
	
	//获取数据
	const getData=function getData(){
		//1. 创建 XMLHttpRequest 核心对象
		let xhr=new XMLHttpRequest;
		//2. 建立连接
		xhr.open("GET","data.json",false);
		//3. 注册监听
		xhr.onreadystatechange=function(){
			//状态值--4  状态码---200
			if(xhr.readyState===4&&xhr.status===200){
				//console.log(xhr.response);//数据
				data=JSON.parse(xhr.response);
			}
		}
		//4. 发送数据
		xhr.send(null);
	}
	//循环渲染
	const render=function render(){
		//console.log(data);//检查一下，数据是对象吗
		//1. 统一处理数据，图片的高度和宽度
		data=data.map(item=>{
			let {width,height}=item;
			item.width=220;
			item.height=220*height/width;
			return item;
		})
		
		//循环渲染
		let groups=[],i;//每次循环，放三条数据

		for(i=0;i<data.length;i+=3){//i=0,3,6....
		   //i=0  slice(0,3)  [0,1,2]
		   //i=3  slice(3,6)  [3,4,5]
			groups=data.slice(i,i+3);//每次循环，放三条数据
			
			groups.sort((a,b)=>{//groups 按照【小，中，大】排列
				return a.height-b.height;
			})
			
			//注意：cloumns 不能直接取得height,要用 offsetHeight
	        cloumns.sort((a,b)=>{//cloumns 按照【大，中，小】排列
			   return b.offsetHeight-a.offsetHeight;
		    })
			
			//一一对应插入
			groups.forEach((item,index)=>{
				let {id,pic,title,link,height,width}=item;
				let str=`<div class="item" data-id="${id}">
					<a href="${link}">
						<div class="imgbox" style="height:${height}px;width:${width}px;">
							<img src="" data-src="${pic}" alt="" style="height:${height}px;width:${width}px;">
						</div>
						<p>${title}</p>
					</a>
				</div>`
				
				//插入是累计插入 +=
				cloumns[index].innerHTML+=str;
			})
		
		}
	    
		imgs=document.querySelectorAll("img");
	}
	//图片懒加载
	const loadingimg=function loadingimg(img){
		let dataSrc=img.getAttribute("data-src");
		let newimg=document.createElement("img");
		newimg.src=dataSrc;
		newimg.onload=function(){//图片路径正确，才能进入
			img.src=dataSrc;
			newimg=null;
			img.flag=true;
		}
	}
	//功能部分
	const handle=function handle(){
		console.log("111");
		//50张图片的  视窗高度  图片盒子距离视窗顶部的高度
		imgs.forEach(item=>{//注意 item 是图片
			let ch=html.clientHeight;
			let imgBox=item.parentNode;//图片盒子
			let imgBoxh=imgBox.getBoundingClientRect().bottom;
			if(ch>=imgBoxh){
				if(item.flag){//已经加载过，图片就不许再加载了
					return;
				}
				loadingimg(item);//图片懒加载..
			}
		})
	}
	//加载更多
	let count=0;
	const loadmore=function loadmore(){
		let allh=html.scrollHeight;//整个页面可以滚动的高度
		//视窗滚动过去的高度+视窗的高度
		let h=html.scrollTop+html.clientHeight;
		if(h+100>=allh){
			count++;
			if(count>=3){//加载到三屏的时候，停止加载更多
				return;
			}
			getData();
			render();
			handle();
		}
	}
	return {
		init(){
			getData();
			render();
			//一打开页面，就要做图片懒加载
			handle();
			window.onscroll=throttle(function(){//只有滚动的时候，才做图片懒加载
				handle();
				loadmore();
			},500)
		}
	}
})()

product.init();